import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  listItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderBottomWidth: 0.5
  },
  avatarWrapper: {
    position: "relative",
    marginRight: 12,
  },
  avatar: {
    borderRadius: 25,
  },
  statusDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    position: "absolute",
    right: 0,
    bottom: 0,
    borderWidth: 1.5,
    borderColor: "#fff",
  },
  infoContainer: {
    flex: 1,
    justifyContent: "center",
  },
  nickname: {
    fontSize: 16,
    color: "#1c1c1e",
    fontWeight: "500",
  },
  remark: {
    fontSize: 14,
    color: "#888",
    fontWeight: "normal",
  },
  onlineRow: {
    flexDirection: "row",
    justifyContent: "space-between", // 让两个 Text 分居左右两边
    marginTop: 2,
  },
  leftText: {
    fontSize: 12,
    color: "#999",
  },
  rightText: {
    fontSize: 12,
    color: "#999",
  },
  container: {
    flex: 1,
    backgroundColor: "#f9f9f9",
  },
  loading: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  avatarContainer: {
    position: "relative",
  },
  nameText: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#333",
  },
  errorContainer: {
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  errorText: {
    fontSize: 16,
    color: "#666",
    marginVertical: 10,
  },
  retryButton: {
    backgroundColor: "#007bff",
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  retryText: {
    color: "white",
    fontSize: 14,
  },
  emptyContainer: {
    justifyContent: "center",
    alignItems: "center",
    minHeight: 300,
  },
  emptyText: {
    color: "#999",
    fontSize: 16,
    marginTop: 10,
  },
  noteText: {
    fontSize: 12,
    color: "#666",
    marginTop: 2,
  },
});

export default styles;
